<template>
  <transition
    :css="false"
    @enter='enter'
    @leave='leave'>
    <div class="playercontain" v-show="show">
      <div class="mask" @click.stop="hidden"></div>
      <div class="list-player">
        <div class="player-top">
          <div class="top-left">
            <div class="mode loop" ref="mode" @click.stop="mode"></div>
            <p ref="play_type">{{PlayType}}</p>
          </div>
          <div class="top-right" @click.stop="deleteAllsongs"></div>
        </div>
        <div class="player-middle">
          <ScrollView ref="scrollView">
            <ul ref="playing">
              <li class="item" v-for="(value, index) in this.getSongs" :key="value.id" @click.stop="play(index)">
               <div class="item-left">
                  <div class="item-play" v-show="getIndex === index"></div>
                  <p>{{value.name}}</p>
                </div>
                <div class="item-right">
                  <div class="item-favorite" @click.stop="setFavorite(value)" :class="{active: isFavorite(value)}"></div>
                  <div class="item-del" @click.stop="deleteSingalSong(index)"></div>
                </div>
              </li>
            </ul>
          </ScrollView>
        </div>
        <div class="player-bottom" @click.stop="hidden">关闭</div>
      </div>
    </div>
  </transition>
</template>

<script>
import modeType from '../../store/modeType'
import { mapActions, mapGetters } from 'vuex'
import Velocity from 'velocity-animate'
import 'velocity-animate/velocity.ui'
import ScrollView from '../iscroll.vue'
export default {
  name: 'ListPlayer',
  data () {
    return {
      show: false,
      PlayType: '列表循环'
    }
  },
  computed: {
    ...mapGetters([
      'modeType',
      'getSongs',
      'isPlaying',
      'getIndex',
      'currentSong',
      'getFavoriteList'
    ])
  },
  methods: {
    ...mapActions([
      'setMiniPlayer',
      'setModeType',
      'delSingalSong',
      'setPlaying',
      'setCurrentIndex',
      'setFavoriteList'
    ]),
    ishow () {
      this.show = true
    },
    hidden () {
      this.show = false
      this.setMiniPlayer(true)
    },
    enter (el, done) {
      Velocity(el, 'transition.bounceUpIn', { duration: 1000, delay: 500 }, function () {
        done()
      })
    },
    leave (el, done) {
      Velocity(el, 'transition.bounceDownOut', { duration: 1000 }, function () {
        done()
      })
    },
    mode () {
      if (this.modeType === modeType.loop) {
        this.setModeType(modeType.one)
      } else if (this.modeType === modeType.one) {
        this.setModeType(modeType.random)
      } else {
        this.setModeType(modeType.loop)
      }
    },
    deleteSingalSong (index) {
      if (this.isPlaying && this.getIndex === index) {
        this.setPlaying(false)
      }
      this.delSingalSong(index)
      if (this.getSongs.length === 0) {
        this.show = false
      }
    },
    deleteAllsongs () {
      this.delSingalSong()
      this.show = false
    },
    play (index) {
      if (this.getIndex === index) {
        this.setPlaying(!this.isPlaying)
      } else {
        this.setPlaying(false)
        this.setCurrentIndex(index)
        this.setPlaying(true)
        // console.log(index)
      }
    },
    setFavorite (song) {
      this.setFavoriteList(song)
    },
    isFavorite (song) {
      const result = this.getFavoriteList.find(function (value) {
        return value.id === song.id
      })
      return result !== undefined
    }
  },
  components: {
    ScrollView
  },
  watch: {
    modeType (newValue, oldValue) {
      if (newValue === modeType.loop) {
        this.PlayType = '列表循环'
        this.$refs.mode.classList.remove('random')
        this.$refs.mode.classList.add('loop')
      } else if (newValue === modeType.one) {
        this.PlayType = '单曲循环'
        this.$refs.mode.classList.remove('loop')
        this.$refs.mode.classList.add('one')
      } else {
        this.PlayType = '随机播放'
        this.$refs.mode.classList.remove('one')
        this.$refs.mode.classList.add('random')
      }
    },
    show (newValue, oldValue) {
      if (newValue) {
        this.$refs.scrollView.reFresh()
      }
    },
    isPlaying (newValue, oldValue) {
      if (newValue) {
        this.$refs.playing.classList.add('active')
        // console.log(this.getIndex)
      } else {
        this.$refs.playing.classList.remove('active')
      }
    }
  }
}
</script>

<style scoped lang='scss'>
  @import '../../assets/css/variable.scss';
  @import '../../assets/css/mixin.scss';
  .playercontain{
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .mask{
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
    .list-player{
      position: fixed;
      width: 100%;
      left: 0;
      bottom: 0;
      @include bg_sub_color();
      background: #fff;
      .player-top{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #000;
        .top-left{
          display: flex;
          padding-left: 20px;
          .mode{
            width: 56px;
            height: 56px;
            margin-right: 20px;
            &.loop{
              @include bg_img('../../assets/images/small_loop');
            }
            &.one{
              @include bg_img('../../assets/images/small_one');
            }
            &.random{
            @include bg_img('../../assets/images/small_shuffle');
            }
          }
          p{
            line-height: 56px;
            @include font_size($font_medium_s);
            @include font_color();
          }
        }
        .top-right{
          width: 80px;
          height: 80px;
          @include bg_img('../../assets/images/small_del');
        }
      }
      .player-middle{
        width: 100%;
        height: 700px;
        overflow: hidden;
        box-sizing: border-box;
        border-bottom: 1px solid #000;
        ul{
          &.active{
            .item{
              .item-play{
                @include bg_img('../../assets/images/small_pause');
              }
            }
          }
        }
        .item{
          display: flex;
          justify-content: space-between;
          height: 100px;
          padding: 0 20px;
          box-sizing: border-box;
          .item-left{
            display: flex;
            align-items: center;
            .item-play{
              width: 56px;
              height: 56px;
              @include bg_img('../../assets/images/small_play');
              margin-right: 20px;
              &.active{
                @include bg_img('../../assets/images/pause');
              }
            }
            p{
              @include font_size($font_medium_s);
              @include font_color();
            }
          }
          .item-right{
            display: flex;
            align-items: center;
            .item-favorite{
              width: 56px;
              height: 56px;
              @include bg_img('../../assets/images/small_un_favorite');
              &.active{
                @include bg_img('../../assets/images/small_favorite');
              }
            }
            .item-del{
              width: 56px;
              height: 56px;
              @include bg_img('../../assets/images/small_close');
            }
          }
        }
      }
      .player-bottom{
        width: 100%;
        height: 100px;
        text-align: center;
        line-height: 100px;
        @include font_size($font_medium);
        color: #fff;
        @include bg_color();
      }
    }
  }
</style>
